<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#b1").click(function(){
				$("#p1").hide(3000,"linear");
			});
			$("#b2").click(function(){
				$("#p1").show(3000,"linear");
			});
			$("#b3").click(function(){
				$("#p1").fadeOut(3000);
			});
			$("#b4").click(function(){
				$("#p1").fadeIn(3000);
			});
			$("#b5").click(function(){
				$("#p1").slideUp(3000);
			});
			$("#b6").click(function(){
				$("#p1").slideDown(3000);
			});
			$("#b7").click(function(){
				$("#p1").animate({
						width: "10%",         .                                                                                                                                         
					    height: "30%", 
					    borderColor:"blue",
						borderStyle:"outset",
					    borderWidth: 10
					  },4000);
			});
		});
		</script>	
	</head>
	<body>
		<img style="border: 1px solid red;" src="../day5/images/1.jpg" height="400px" width="600px" id="p1"/>
		<div id="d1">
			<input type="button" name="" id="b1" value="hide" />
			<input type="button" name="" id="b2" value="show" />
		
			<input type="button" name="" id="b3" value="fadeout" />
			<input type="button" name="" id="b4" value="fadeIn" />
			
			<input type="button" name="" id="b5" value="slidedown" />
			<input type="button" name="" id="b6" value="slideup" />
			<input type="button" name="" id="b7" value="自定义动画" />
			
		</div>
	</body>
</html>
